(function() {
  var dataAlbumCropArr = {};
  var datalogoCropArr = {};
  var dataavatarCropArr = {};
  
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
	
	// file selection
	function FileSelectHandler(e) {
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
		var id = e.currentTarget.getAttribute('id');
		//console.log(id);
		
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			if (i == 8 && id == 'file_album') break;
			if (i == 1 && (id == 'file_logo' || id == 'file_avatar')) break;
			ParseFile(f, id);
			UploadFile(f, id);
		}
    
	    alert('Chọn vùng tương ứng để up ảnh.');
	   
	    if (id == 'file_album') {
		    var xsize = 626, ysize = 379, jcrop_api_album;
		    
	    	jQuery('.target_album').each(function() {
		      image_to_crop_album = $(this);
		      image_to_crop_album.Jcrop({
		        //aspectRatio: xsize / ysize,
		        setSelect: [ 0, 0, xsize, ysize ],
		        //minSize: [ xsize/2, ysize/2 ],
		        //maxSize: [ xsize, ysize ],
		        onSelect: function(coords){
		    	  dataAlbumCropArr[image_to_crop_album.attr('id')] = coords;
		   	      $('#dataAlbumCropJson').val($.toJSON(dataAlbumCropArr));
		      	}
		      },function(){
		          jcrop_api_album = this;
		          jcrop_api_album.animateTo([0,0,xsize,ysize]);
		      });
		    });
	    } else if (id == 'file_logo') { 
		    var xsize = 100, ysize = 110, jcrop_api_logo;
		    
		    jQuery('.target_logo').each(function() {
		      image_to_crop_logo = $(this);
		      image_to_crop_logo.Jcrop({
		        //aspectRatio: xsize / ysize,
		        setSelect: [ 0, 0, xsize, ysize ],
		        //minSize: [ xsize/2, ysize/2 ],
		        //maxSize: [ xsize*2, ysize*2 ],
		        onSelect: function(coords){
		    	  datalogoCropArr[image_to_crop_logo.attr('id')] = coords;
		    	  console.log(coords);
		   	      $('#datalogoCropJson').val($.toJSON(datalogoCropArr));
		      	}
		      },function(){
		    	  jcrop_api_logo = this;
		    	  jcrop_api_logo.animateTo([0,0,xsize,ysize]);
		      });
		    });
	    } else if (id == 'file_avatar') { 
		    var xsize = 224, ysize = 155, jcrop_api_avatar;
		    
		    jQuery('.target_avatar').each(function() {
		      image_to_crop_avatar = $(this);
		      image_to_crop_avatar.Jcrop({
		        //aspectRatio: xsize / ysize,
		        setSelect: [ 0, 0, xsize, ysize ],
		        //minSize: [ xsize/2, ysize/2 ],
		        //maxSize: [ xsize*2, ysize*2 ],
		        onSelect: function(coords){
		    	  dataavatarCropArr[image_to_crop_avatar.attr('id')] = coords;
		    	  console.log(coords);
		   	      $('#dataavatarCropJson').val($.toJSON(dataavatarCropArr));
		      	}
		      },function(){
		    	  jcrop_api_avatar = this;
		    	  jcrop_api_avatar.animateTo([0,0,xsize,ysize]);
		      });
		    });
	    }
	    
	}


	// output file information
	function ParseFile(file, id) {
		// display an image
		if (file.type.indexOf("image") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				if (id == 'file_album') {
					var m_album = $id("album_append");
					var msg = "<p><strong>" + file.name + ":</strong><br />" +
						'<img class="target_album" id="' + file.name + '" src="' + e.target.result + '" /></p>';
				
					m_album.innerHTML = msg + m_album.innerHTML;
				} else if (id == 'file_logo') {
					var m_logo = $id("logo_append");
					var msg = "<p><strong>" + file.name + ":</strong><br />" +
						'<img class="target_logo" id="' + file.name + '" src="' + e.target.result + '" /></p>';
				
					m_logo.innerHTML = msg + m_logo.innerHTML;
				} else if (id == 'file_avatar') {
					var m_avatar = $id("avatar_append");
					var msg = "<p><strong>" + file.name + ":</strong><br />" +
						'<img class="target_avatar" id="' + file.name + '" src="' + e.target.result + '" /></p>';
				
					m_avatar.innerHTML = msg + m_avatar.innerHTML;
				}
			};
			reader.readAsDataURL(file);
		}
	}


	// upload JPEG files
	function UploadFile(file, id) {
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {

			// start upload
			if (id == 'file_album') {
				xhr.open("POST", $id("upload_album").action, true);
			} else if (id == 'file_logo') {
				xhr.open("POST", $id("upload_logo").action, true);
			} else if (id == 'file_avatar') {
				xhr.open("POST", $id("upload_avatar").action, true);
			}
			
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
		}
	}


	// initialize
	function Init() {
		var file_album = $id("file_album");
		var file_logo = $id("file_logo");
		var file_avatar = $id("file_avatar");
		
		// file select
		file_album.addEventListener("change", FileSelectHandler, false);
		file_logo.addEventListener("change", FileSelectHandler, false);
		file_avatar.addEventListener("change", FileSelectHandler, false);

		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
			// remove submit button
			$(".submitbutton").css("display", "none");
		}

	}

	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
})();